<template>
    <!-- 初始首页内容 -->
    <div class="ai-content" >

      <div class="search-section">
    <!-- 搜索框上方两句话 -->
    <div class="hero-text">
      <h2>一句话，呈你所想</h2>
      <p>与 AI 对话轻松创建应用和网站</p>
    </div>

    <!-- 多行输入 + 悬浮搜索按钮 -->
    <div class="textarea-wrapper">
      <el-input
        type="textarea"
        :rows="6"
        v-model="searchText"
        placeholder="请输入你的需求，如“使用vue/html创建一个有公司官网，包含...."
        class="search-textarea"
      />
      <el-button class="search-btn"  icon="el-icon-top" size="medium" circle type="primary" 
             @click="onSearch">
     
      </el-button>
    </div>

    <!-- 下方标签按钮 -->
    <div class="tag-buttons">
      <el-button size="mini" type="info" @click="onSearchText(1)">个人博客网站</el-button>
      <el-button size="mini" type="info" @click="onSearchText(2)">VUE企业网站</el-button>
      <el-button size="mini" type="info" @click="onSearchText(3)">电商运营后台</el-button>
      <el-button size="mini" type="info" @click="onSearchText(4)">VUE后台管理网站</el-button>
    </div>
    </div>

      <div class="case-section">
        <div class="case-title">精选案例</div>
            <el-divider></el-divider>
<!-- 包一层带滚动条的容器 -->
  <div
    class="case-list-wrapper"
    v-infinite-scroll="loadMore"
    :infinite-scroll-disabled="cursorLoading || finished"
    :infinite-scroll-distance="10"
  >
        <el-row :gutter="16">
          <el-col
            v-for="item in cases"
            :key="item.id"
            :span="6" style="padding-top:10px"
          >
            <el-card :body-style="{ padding: '5px' }"
              class="case-card"
              shadow="hover">
              <img :src="item.cover?item.cover:'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'" class="image">
              <div style="padding: 7px;">
                <span >{{ item.appName }}</span>
                <div class="bottom clearfix">
                  <time class="time"></time>
                  <!-- <el-button type="text" class="button" @click="openPreviewWindow(item.id,item.codeGenType)">查看作品</el-button>
                  <el-button type="text" class="button" @click="downloadZip(item.id)">下载作品</el-button> -->
                  <el-col :span="12">
                    <el-button type="text" @click="openPreviewWindow(item.id, item.codeGenType)">查看作品</el-button>
                  </el-col>
                  <el-col :span="12" style="text-align: right;">
                    <el-button type="text" @click="downloadZip(item.id)">下载作品</el-button>
                  </el-col>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>

     <!-- 加载中：图标 + 文本 -->
    <div v-if="cursorLoading" class="loading-tip">
      <i class="el-icon-loading"></i>
      <span>加载中...</span>
    </div>
    <div v-else-if="finished" class="loading-tip">—— 我是有底线的 ——</div>
  </div>
      </div>
    </div>
</template>

<script>
import {  getCursorPage } from '@/api/common'
import { download } from '@/utils/request'

export default {
  name: "Home",
  data() {
    return {
      searchText: "",
      cursorLoading: false,      // 加载状态
      cases: [],
      nextCursor: "",    // 下次查询的游标
      finished: false,     // 是否已无更多
      pageSize: 12,        // 每页条数
    };
  },
  mounted() {
    // 首次拉一页
    this.loadMore()
  },
  methods: {
    onSearch() {
      if (!this.searchText) {
        this.$message.warning('请输入文字')
        return
      }
      // 带 query 参数跳转到 B
      this.$router.push({
        name: 'chat',
        query: { newVal: this.searchText }
      })
    },
    //案例分页
     async loadMore() {
      if (this.cursorLoading || this.finished) return;
      this.cursorLoading = true;
       setTimeout(async () => {
          try {
            const res = await getCursorPage( this.nextCursor,this.pageSize);
            // 把新数据接到列表后面
            this.cases.push(...res.data.items);
            // 更新游标
            this.nextCursor = res.data.nextCursor;
            // 如果 nextCursor 为 null 或 items 数量 < pageSize，就认为加载完了
            if (!res.data.nextCursor || res.data.items.length < this.pageSize) {
              this.finished = true;
            }
          } catch (err) {
            this.$message.error(err.message || '加载失败');
          } finally {
            this.cursorLoading = false;
          }
      }, 1500)  // <- 延迟 2000ms
    },
    onSearchText(type){
      if(type===1){
        this.searchText="使用原生Html设计一个简约风格的个人博客网站，包括导航栏、轮播图区域、文章介绍、个人信息等部分"
      }
      if(type===2){
        this.searchText="使用vue创建一个企业网站，风格要大气、商务、专业。设计一个完整的企业网站首页，包括导航栏、hero区域、服务介绍、公司优势、客户评价等部分。";
      }
      if(type===3){
        this.searchText="使用原生Html设计一个现代化电商运营后台，背景为纯白，顶部导航使用渐变主题色。订单处理采用卡片流设计，商品管理采用图片卡片设计。整体风格简洁高效。";
      }
      if(type===4){
        this.searchText="使用vue设计一个后台管理网站，UI设计采用element-ui，顶部有导航，左边有菜单栏，右边是表格展示区域。整体风格简洁大气。";
      }
    },
    async downloadZip(appId) {
      download('static/download', { appId }, appId+'.zip',null );
    },
    /** 新窗口打开预览 */
    openPreviewWindow(id,codeGenType) {
      if('vue'===codeGenType){
          window.open(process.env.VUE_APP_WEB_BASE+"vue_"+id+"/dist/index.html");;
      }else{
          window.open(process.env.VUE_APP_WEB_BASE+"html_"+id+"/index.html");
      }
  },
  },
};
</script>

<style scoped>
.ai-app {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f8fafb;
  overflow: auto;              /* 初始状态允许滚动 */
}

.image {
      width: 100%;
      height: 150px;
      border-radius: 10px;
      display: block;
}

/* 初始内容区 */
.ai-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 120px;
  --tw-bg-opacity: 1;
  background-image: url("@/assets/bj.png");
  background-size: cover;
}

/* 搜索区 */
.search-section {
  max-width: 700px;
  margin: 0 auto;
  width: 700px;
}


.hero-text {
  text-align: center;
  margin-bottom: 40px;
}
.hero-text h2 {
  font-size: 42px;
  font-weight: bold;
  margin: 0;
}
/* 针对 el-input textarea 的圆角 */
.search-textarea >>> .el-textarea__inner {
  border-radius: 20px !important;
}

.hero-text p {
  font-size: 16px;
  color: #666;
  margin: 8px 0 0;
}
.textarea-wrapper {
  position: relative;
  width: 100%;
}
.search-textarea .el-textarea__inner {
  resize: none;
  padding: 12px 100px 12px 16px;
  font-size: 16px;
  line-height: 1.5;
  min-height: 96px;
}
.search-btn {
  position: absolute;
  right: 8px;
  bottom: 8px;
}
.tag-buttons {
  margin-top: 12px;
  text-align: center;
}
.tag-buttons .el-button {
  margin: 4px 6px;
}

/* 案例区 */
.case-section {
  border-radius: 20px !important;
  margin-top: 80px;
  margin-bottom: 80px;
  padding: 30px;
  width: 80%;
  background-color: #fff;
  max-width: 1000px;
}
.case-title {
  font-size: 25px;
  font-weight: bold;
  /* color: #555; */
  margin-bottom: 18px;
}
.case-card {
  cursor: pointer;
  margin-bottom: 16px;
  min-height: 120px;
  transition: box-shadow 0.2s;
}
.case-card:hover {
  box-shadow: 0 2px 16px #e5e9f6;
}

.case-list-wrapper {
  /* height: calc(100vh - 160px); */
  overflow: auto;
  padding: 16px;
}

/* loading-tip 居中 */
.loading-tip {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #999;
  margin: 12px 0;
}


</style>



